<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
    <script src="js/function.js"></script>
    <script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.js"></script>
</head>
<style type="text/css">
    body{ margin:0px; padding:0px; /*background-color: #232435;*/}
</style>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height: 99vh;"></div>
<script type="text/javascript">
    window.addEventListener('message',function(event){
        //此处执行事件
        var _data = event.data
        // 取得UID
        if(typeof _data.uid !== 'undefined'){
            uid = parseInt(_data.uid);
            // 存到cookie中
            setCookie('uid' + uid,uid,'h1');
        }
        // 当heartRateIdealMax值存在，更新图表的区间样式
        if(typeof _data.heartRateIdealMax !== 'undefined'){
            heartRateIdealLow = parseInt(_data.heartRateIdealLow);
            heartRateIdealHeight = parseInt(_data.heartRateIdealHeight);
            heartRateIdealDangerd = parseInt(_data.heartRateIdealDangerd);
            heartRateIdealMax = parseInt(_data.heartRateIdealMax);
            // alert('addEventListener='+uid+'='+heartRateIdealLow+'|'+heartRateIdealHeight+'|'+heartRateIdealDangerd+'|'+heartRateIdealMax)
            // 存到cookie中
            setCookie('heartRateIdealLow' + uid,heartRateIdealLow,'h1');
            setCookie('heartRateIdealHeight' + uid,heartRateIdealHeight,'h1');
            setCookie('heartRateIdealDangerd' + uid,heartRateIdealDangerd,'h1');
            setCookie('heartRateIdealMax' + uid,heartRateIdealMax,'h1');
            ChartCommon.updateEchartsInit();
            ChartCommon.updateEcharts();
        }
        // 当hrd值存在，更新图表的心率数值
        if(typeof _data.hrd !== 'undefined'){
            hrd = _data.hrd;
            // 存到cookie中
            // setCookie('hrd' + uid,hrd,'h1');
            ChartCommon.updateEcharts();
            if (programWorkoutType !== 2) {
                setTimeout("bgAnimations()", 1000)
            }
        }
        // alert(_data.heartRateIdealMax);
    })
</script>
<script type="text/javascript">
    // 需动态传值的参数 begin
    // 加入者
    var uid = getParam('uid') || 0;
    // workout课程类型(0：常规课程；1：演示/DEMO PROGRAM；2：Fitness Test体测；)
    var programWorkoutType = getParam('programWorkoutType') || 0;
    // 理想心率的最低值
    var heartRateIdealLow=0;
    // 理想心率的最高值
    var heartRateIdealHeight=0;
    // 危险心率边界值
    var heartRateIdealDangerd=0;
    // 最高心率
    var heartRateIdealMax=200;
    // 当前心率值
    // var hrValue = 0;
    // 需动态传值的参数 end

    // 定时器ID
    var timerHandler = null;
    // 定时器执行的时间间隔
    var due = 1000
    // 心率值数组
    var hrd = [];
    // 图表的初始化配置参数-指定图表的配置项和数据
    var hrcOpt = {
        /* title: {
            text: '心率图'
        },*/
        backgroundColor: 'rgba(255,255,255,0)', // 透明背景
        grid: {
            top: 15,
            bottom: 15
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 3,
                    color: '#fff'
                }
            },
            data: []
        },
        yAxis: [{
            type: 'value',
            show: true,
            min: 60,
            max: 200,
            interval: 1,
            position: 'left',
            axisLine: {
                show: true,
                lineStyle: {
                    width: 3,
                    color: '#fff'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false,
                textStyle: {
                    color: '#fff'
                },
                formatter: function(val) {
                    return val === 200 ? 'Max' : val
                }
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['#37384a'],
                    width: 0
                }
            },
            splitLine: {
                show: false
            }
        },
            {
                type: 'value',
                show: false,
                min: 60,
                max: 200,
                interval: 16,
                position: 'right',
                axisLine: {
                    show: false,
                    lineStyle: {
                        width: 0,
                        color: '#37384a'
                    }
                },
                axisLabel: {
                    show: false,
                    textStyle: {
                        color: '#fff'
                    },
                    formatter: function(val) {
                        return val === 200 ? 'Max' : val
                    }
                },
                splitArea: {
                    show: false,
                    areaStyle: {
                        color: ['#37384a']
                    }
                }
                // splitLine: {
                //     show: false
                // }
            },
            {
                type: 'category',
                show: true,
                offset: 1,
                position: 'left',
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    },
                    interval: 1,
                    formatter: function(val) {
                        return val === 200 ? 'Max' : val
                    },
                },
                splitArea: {
                    show: false,
                    areaStyle: {
                        color: ['#37384a']
                    }
                },
                data: []
                // splitLine: {
                //     show: false
                // }
            }
        ],
        series: [
            {
                data: [],
                symbol: 'none',
                type: 'line',
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#e6920c',
                            width: 6
                        }
                    }
                }
            }
        ]
    };
    // 最佳心率区间背景状态
    var bgStatus = true

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 取得心率区间
    if(getParam('heartRateIdeal') !== null){
        var _heartRateIdeal = getParam('heartRateIdeal').split('|');
        heartRateIdealLow = parseInt(_heartRateIdeal[0]);
        heartRateIdealHeight = parseInt(_heartRateIdeal[1]);
        heartRateIdealDangerd = parseInt(_heartRateIdeal[2]);
        heartRateIdealMax = parseInt(_heartRateIdeal[3]);
    }
    // 1\如果getParam('programWorkoutType')不为空时，清空cookie；[否则存储cookie；]
    if(getParam('programWorkoutType') !== null && getParam('uid') !== null){
        delCookie('programWorkoutType' + uid);
        delCookie('uid' + uid);
        setCookie('uid' + uid,uid,'h1');
        setCookie('programWorkoutType' + uid,programWorkoutType,'h1');
        delCookie('heartRateIdealLow' + uid);
        delCookie('heartRateIdealHeight' + uid);
        delCookie('heartRateIdealDangerd' + uid);
        delCookie('heartRateIdealMax' + uid);
        // delCookie('hrd' + uid);
    }
    // 2\当COOKIE有值时，直接使用COOKIE的值，[绘制心率图区间]；
    if(getCookie('uid' + uid) !== null){uid=getCookie('uid' + uid);}
    if(getCookie('programWorkoutType' + uid) !== null){programWorkoutType=parseInt(getCookie('programWorkoutType' + uid));}
    if(getCookie('heartRateIdealLow' + uid) !== null){heartRateIdealLow=parseInt(getCookie('heartRateIdealLow' + uid));}
    if(getCookie('heartRateIdealHeight' + uid) !== null){heartRateIdealHeight=parseInt(getCookie('heartRateIdealHeight' + uid));}
    if(getCookie('heartRateIdealDangerd' + uid) !== null){heartRateIdealDangerd=parseInt(getCookie('heartRateIdealDangerd' + uid));}
    if(getCookie('heartRateIdealMax' + uid) !== null){heartRateIdealMax=parseInt(getCookie('heartRateIdealMax' + uid));}
    // if(getCookie('hrd' + uid) !== null){hrd=getCookie('hrd' + uid);}

    // 取得图表的区间样式
    function getEchartsSection() {
        // alert('getEchartsSection='+uid+'='+heartRateIdealLow+'|'+heartRateIdealHeight+'|'+heartRateIdealDangerd+'|'+heartRateIdealMax)
        var _hrcBackgroundColor = []
        for (var i = 60; i <= heartRateIdealMax; i += 1) {
            // 理想的心率区间，绿色
            if (i >= heartRateIdealDangerd) {
                // 危险值
                _hrcBackgroundColor.push('rgba(255,0,0,0.6)')
            } else if (i >= heartRateIdealLow && i <= heartRateIdealHeight) {
                _hrcBackgroundColor.push('rgba(230,147,12,0.6)')
            } else {
                _hrcBackgroundColor.push('rgba(255,255,255,0)')
            }
        }
        hrcOpt.yAxis[0].max = heartRateIdealMax + 1
        hrcOpt.yAxis[0].splitArea.areaStyle.color = _hrcBackgroundColor


        hrcOpt.yAxis[2].data = _.range(60, heartRateIdealMax + 1)


        // hrcOpt.yAxis[2].max = heartRateIdealMax + 1
        hrcOpt.yAxis[2].axisLabel.interval = (index, value) => {
             if(value == heartRateIdealLow || value == heartRateIdealHeight || value == heartRateIdealDangerd || value == heartRateIdealMax || value == 60) {
                 return true
             }else {
                 return false
             }
        }



        hrcOpt.yAxis[2].axisLabel.formatter = (val) => {
            return val == heartRateIdealMax ? 'Max' : val
        }



    }
    function ChartCommon() {}
    // 初始化图表数据
    ChartCommon.prototype.init = function () {
        // 理想心率的最低值
        // if (heartRateIdealLow === 0) { heartRateIdealLow = 124 }
        // 理想心率的最高值
        // if (heartRateIdealHeight === 0) { heartRateIdealHeight = 156 }
        // 危险心率边界值
        // if (heartRateIdealDangerd === 0) { heartRateIdealDangerd = 176 }
        // workout课程类型(0：常规课程 ；1：演示/DEMO PROGRAM；2：Fitness Test体测；)
        if (programWorkoutType === 2) {
            hrcOpt.yAxis[0].interval = 28
            hrcOpt.yAxis[0].splitArea.areaStyle.color = ['#959499', '#02a8dc', '#02ab66', '#f9a61a', '#d2222c']
            hrcOpt.yAxis[0].axisLabel.show = true
            hrcOpt.yAxis[1].show = false
        } else {
            if(heartRateIdealLow > 0){
                getEchartsSection();
            }
        }
        myChart.setOption(hrcOpt)
    }
    // 动态改变心率区间的变化
    ChartCommon.prototype.updateEchartsInit = function () {
        myChart.resize();
        // workout课程类型(0：常规课程 ；1：演示/DEMO PROGRAM；2：Fitness Test体测；)
        if (programWorkoutType === 2) {
            return
        }
        if(heartRateIdealLow > 0) {
            getEchartsSection();
            myChart.setOption(hrcOpt);
        }
    }
    // 更新图表心率数据
    ChartCommon.prototype.updateEcharts = function() {
        if (hrd.length > 0) {
            myChart.setOption({
                series: {
                    data: hrd
                }
            })
        }
    }

    var ChartCommon = new ChartCommon();
    ChartCommon.init();
    ChartCommon.updateEcharts();




    function bgAnimations() {
        var _hrcBackgroundColor = []
        if(!bgStatus) {
            for (let i = 60; i <= heartRateIdealMax; i += 1) {
                // 理想的心率区间，绿色
                if (i >= heartRateIdealDangerd) {
                    // 危险值
                    _hrcBackgroundColor.push('rgba(255,0,0,0.6)')
                } else if (i >= heartRateIdealLow && i <= heartRateIdealHeight) {
                    _hrcBackgroundColor.push('rgba(230,147,12,0.6)')
                } else {
                    _hrcBackgroundColor.push('rgba(255,255,255,0)')
                }
            }
        }else {
            for (let i = 60; i <= heartRateIdealMax; i += 1) {
                // 理想的心率区间，绿色
                if (i >= heartRateIdealDangerd) {
                    // 危险值
                    _hrcBackgroundColor.push('rgba(255,0,0,0.6)')
                } else if (i >= heartRateIdealLow && i <= heartRateIdealHeight) {
                    _hrcBackgroundColor.push('rgba(230,147,12,0.2)')
                } else {
                    _hrcBackgroundColor.push('rgba(255,255,255,0)')
                }
            }
        }
        bgStatus = !bgStatus
        myChart.setOption({
            yAxis: [{
                splitArea: {
                    areaStyle: {
                        color: _hrcBackgroundColor
                    }
                }
            }]
        })
    }
    
</script>
</body>
</html>